<template>
	<view class="page-wrapper linear-back" style="padding-top: 90rpx;">
		<uni-nav-bar backgroundColor="#FFFFFF" class="shadow-bottom" :border="false" leftIcon="left" @clickLeft="navigateBack">
			<view style="font-size: 36rpx;display: flex;align-items: center;justify-content: center;flex: 1;">
				{{ $t('pages.petList.title') }}
			</view>
			<template #right>
				<view style="display: flex;align-items: center;column-gap: 8rpx;justify-content: flex-end;">
					<uni-icons type="plus" size="24" @click="navigateToUniPage('/pages/pets/item')"></uni-icons>
					<uni-icons type="list" :orderModel="orderModel" :change:orderModel="sortable.onModelChange" size="24" @click="toggleModel"></uni-icons>								
				</view>
			</template>
		</uni-nav-bar>
			<view class="list" id="petlist"  >
				<view class="item shadow-border" v-for="animal in animalList" :key="animal.id" :data-id="animal.id">
					<image :src="animal.deviceimg" mode="aspectFill" class="portrait"></image>
					<view class="info">
						<view class="title-row">
							{{ animal.nickname }}
						</view>
						<view class="sub-text">
							{{ $t('pages.petList.age') }}：{{ animal.age }} {{ $t('pages.petList.ageUnit') }}					
						</view>		
						<view class="sub-text">
							{{ $t('pages.petList.weight') }}：{{ animal.tizhong }} {{ $t('pages.petList.weightUnit') }}
						</view>
						<view class="sub-text">
							{{ $t('pages.petList.updated') }}: {{ translatePhpTimeToData(animal.updatetime, true) }}
						</view>
					</view>
					<view class="operate">
						<uni-icons type="compose" size="20" @click="toEditPet(animal.id)" v-if="!orderModel"></uni-icons>				
						<uni-icons type="trash" size="20" @click="deletePet(animal.id)" v-if="!orderModel" style="color: #FF0000;"></uni-icons>
						<uni-icons type="bars" size="20" v-if="orderModel"></uni-icons>
					</view>
				</view>
			</view>
		
		
		<up-empty mode="data" text="no pet" v-if="animalList.length == 0"></up-empty>
	</view>
</template>

<script>
import { navigateBack, CacheUtils, navigateToUniPage, translatePhpTimeToData, } from '@/utils/index';
import {
		getChongWuListApi,
		changeSortChongWuListAPi,
		removeChongWuApi
	} from "@/api/request";

export default {
	data(){
		return {		
			CacheUtils, 
			orderModel: false,
			animalList: [],
		}		
	},
	onShow(){
		this.getData();
	},
	methods: {
		navigateBack, 		
		navigateToUniPage, 
		translatePhpTimeToData,
		toggleModel(){
			this.orderModel = !this.orderModel;
		},
		async getData(){
			let res = await getChongWuListApi();
			this.animalList = res.list||[];
		},
		deletePet(id){
			uni.showModal({
				title: this.$t('common.confirm_title'),
				content: this.$t('pages.petList.deleteConfirm'),
				confirmText: this.$t('common.confirm'),
				cancelText: this.$t('common.cancel'),
				success: async (res)=> {
					if (res.confirm) {
						await removeChongWuApi(id);
						this.getData();
					} else if (res.cancel) {
						
					}
				}
			});
		},
		async refreshPosition(idArray){
			const orderArray = idArray.map((el,index)=>{
				return {
					id: el,
					num: idArray.length - index,
				}
			});
			await changeSortChongWuListAPi({
				ids: orderArray.map(el=>el.id).join(','),
				listorder: orderArray.map(el=>el.num).join(','),
			});
		},
		toEditPet(id){
			navigateToUniPage(`/pages/pets/item?type=edit&id=${id}`);
		},
	}
}

</script>


<script module='sortable' lang="renderjs">
	import { Sortable, } from 'sortablejs';
	
	export default {
		data(){
			return {
				sortableInstance: null,
			}
		},
		mounted() {
			this.sortableInstance = new Sortable(document.querySelector('#petlist'), {
				animation: 150,
				onEnd: (evt) =>{
					this.$ownerInstance.callMethod('refreshPosition', this.sortableInstance.toArray());
				}
			});
			this.changeDisableStatus(true);
		},
		methods: {
			changeDisableStatus(flag){
				this.sortableInstance?.option('disabled', flag);
			},
			onModelChange(newVal, oldVal){
				this.changeDisableStatus(!newVal);
			},
		}
	}
</script>



<style lang="scss" scoped>
	.item{
		display: flex;
		padding: 20rpx 30rpx;
		margin: 30rpx 40rpx 40rpx;
		align-items: stretch;
		column-gap: 20rpx;
        background: #FFFFFF;
        border-radius: 30rpx;
		// border-bottom: 1px dotted currentColor;
		.portrait{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			align-self: center;
		}
		.info{
			flex: 1;
			.sub-text{
                color: #9CA3AF;
				font-size: 28rpx;
			}
			.title-row{
                color: #4B5563;
                margin-bottom: 8rpx;
			}
		}
		.operate{
			display: flex;
			flex-direction: column;
			row-gap: 6rpx;	
			justify-content: space-around;
		}
	}
</style>